<template>
	<div>
		<p class="sub-title">{{activeshowName}}</p>
		<Menu theme="light" width="200" :active-name="activesubName" v-if="show" mode="vertical">
			<MenuItem :name="item.name" v-if="!item.hidden" :key="index" v-for="(item,index) in subrouter"  :to="item.path">
						{{item.meta?item.meta.title:'暂无'}}
			</MenuItem>
		</Menu>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				show:true
			}
		},
		computed: {
			router() {
				return this.$store.state.router
			},
			subrouter(){
				var list=	[]
			this.router.filter(val=>{
					if(val.name==this.activeName){
						list = val.children
					}
				})
				return list
				
			},
			activesubName(){
				return this.$store.state.activesubName
			},
			activeshowName(){
				return this.$store.state.activeshowName
			},
			
			activeName(){
				return this.$store.state.activeName
			},
		},
		watch:{
			activeshowName(){
				this.show = false;
				setTimeout(()=>{
					this.show = true;
				},200)
			}
		}
	}
</script>

<style>
	.sub-title{
		height: 64px;
		padding-left: 20px;
		/* text-align: center; */
		line-height: 64px;
		font-size: 16px;
		border: 1px solid #e6e6e6;
		border-left-color: transparent;
		border-top-color: transparent;
	}
</style>
